//设置根路径
axios.defaults.baseURL = 'http://ajax-api.itheima.net'

//改写请求方式
const getTopList1 = async () => {
  const { data: res } = await axios({ method: 'get', url: '/api/category/top' })
  // console.log(res.data)
  const { data } = res
  const requestArr = data.map(item => {
    return axios({ mehtod: 'get', url: '/api/category/sub?id=' + item.id })
  })
  // console.log(requestArr)
  const res1 = await Promise.all(requestArr)
  const renderList = res1.map(item => {
    const { data } = item
    return data
  })
  const goodsList = renderList
    .map(item => {
      return `
        <li>
        <a href="javascript:;">${item.data.name}</a>
        <ul class="sub">
         ${item.data.children
           .map(item => {
             return `
            <li>
            <a href="javascript:;">
              <span>${item.name}</span>
              <img src="${item.picture}" alt="">
            </a>
          </li>
            `
           })
           .join('')}
        </ul>
      </li>
        `
    })
    .join('')
  //渲染
  document.querySelector('.top').innerHTML = goodsList
}

//发起请求获取顶级目录数据
// const getTopList = () => {
//   axios({
//     method: 'get',
//     url: '/api/category/top',
//   })
//     .then(({ data: res }) => {
//       //发起二级请求
//       const { data } = res
//       const requestArr = data.map(item => {
//         return axios({ mehtod: 'get', url: '/api/category/sub?id=' + item.id })
//       })
//       return Promise.all(requestArr)
//     })
//     .then(res => {
//       //解构二级请求的数据
//       const renderList = res.map(item => {
//         const { data } = item
//         return data
//       })
//       const goodsList = renderList
//         .map(item => {
//           return `
//         <li>
//         <a href="javascript:;">${item.data.name}</a>
//         <ul class="sub">
//          ${item.data.children
//            .map(item => {
//              return `
//             <li>
//             <a href="javascript:;">
//               <span>${item.name}</span>
//               <img src="${item.picture}" alt="">
//             </a>
//           </li>
//             `
//            })
//            .join('')}
//         </ul>
//       </li>
//         `
//         })
//         .join('')
//       //渲染
//       document.querySelector('.top').innerHTML = goodsList
//     })
// }
getTopList1()
